import { View, Text, StyleSheet } from "react-native"
import { useDeviceInfo } from "../hooks/useDeviceInfo"
import { __DEV__ } from "react-native"

export function DeviceInfoDisplay() {
  const deviceInfo = useDeviceInfo()

  if (__DEV__) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>设备信息 (仅开发模式显示)</Text>
        <Text style={styles.info}>
          尺寸: {deviceInfo.width} x {deviceInfo.height}
        </Text>
        <Text style={styles.info}>平台: {deviceInfo.platform}</Text>
        <Text style={styles.info}>方向: {deviceInfo.orientation}</Text>
        <Text style={styles.info}>平板: {deviceInfo.isTablet ? "是" : "否"}</Text>
        <Text style={styles.info}>小屏手机: {deviceInfo.isSmallPhone ? "是" : "否"}</Text>
        <Text style={styles.info}>大屏手机: {deviceInfo.isLargePhone ? "是" : "否"}</Text>
        <Text style={styles.info}>iPhone 16: {deviceInfo.isIPhone16 ? "是" : "否"}</Text>
      </View>
    )
  }

  return null
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    top: 50,
    right: 10,
    backgroundColor: "rgba(0,0,0,0.8)",
    padding: 8,
    borderRadius: 4,
    zIndex: 1000,
  },
  title: {
    color: "#ffffff",
    fontSize: 12,
    fontWeight: "bold",
    marginBottom: 4,
  },
  info: {
    color: "#ffffff",
    fontSize: 10,
    marginBottom: 2,
  },
})
